<!DOCTYPE html>
<html>

<head>
    <title>语音听写演示</title>
    <style type="text/css">
        .main {
            width: 100%;
        }

        .center {
            margin: 0 auto;
            display: block;
        }
    </style>
    <script type="text/javascript" src="/static/HZRecorder.js"></script>
    <script type="text/javascript">
        var recorder;

        function startRecording() {
            try {
                HZRecorder.get(function (rec) {
                    recorder = rec;
                    recorder.start();
                    var audio = document.querySelector('audio');
                    audio.pause();
                });
                return true;
            } catch (e) {
                return false;
            }
        }

        function stopRecording() {
            recorder.stop();
        }

        function playRecording() {
            var audio = document.querySelector('audio');
            recorder.play(audio);
        }

        function uploadAudio() {
            let txt = document.getElementById("txtRes");
            recorder.upload("tingXie/", function (state, e) {
                switch (state) {
                    case 'uploading':
                        //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                        break;
                    case 'ok':
                        //alert(e.target.responseText);
                        txt.innerText = e.target.responseText;
                        //alert("上传成功");
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
            txt.innerText = "语音识别中..."
        }

        window.onload = function () {
            var btnStart = document.getElementById('btnStart')
            var h2Title = document.getElementById("audiogif");
            btnStart.onclick = function () {
                if (this.hasAttribute('recoding')) {
                    stopRecording();
                    this.setAttribute('value', '语音输入');
                    this.removeAttribute('recoding');
                    h2Title.innerText = "";
                    playRecording();
                    uploadAudio();
                } else {
                    if (!startRecording()) return;
                    this.setAttribute('value', '停止语音输入');
                    this.setAttribute('recoding', "recod")
                    h2Title.innerText = "...语音输入中...";
                }
            };
        }
    </script>
</head>

<body>
    {% csrf_token %}
    <div class="main">
        <h2 id="audiogif" class="center" style="text-align:center;"></h2>
        <br/>
        <input id="btnStart" type="button" value="语音输入" class="center" />
        <br/>
        <audio controls autoplay class="center"></audio>
        <br/>
        <textarea id="txtRes" class="center" style="Width:260px;Height:100px;" readonly="readonly">
        </textarea>
    </div>
</body>

</html>